import React, {Component} from 'react';
import classnames from 'classnames'

class Main extends Component {


  changeChecked = id => e => {
    //  如何获取选中的状态
    this.props.changeChecked(id, e.target.checked)
  }


  render() {
    const {list, delTodo, changeAllChecked} = this.props
    return (
      <section className="main">
        <input
          id="toggle-all"
          className="toggle-all"
          type="checkbox"
          checked={list.every(item => item.isDone)}
          onChange={changeAllChecked}
        />
        <label htmlFor="toggle-all">Mark all as complete</label>
        <ul className="todo-list">
          {
            list.map(item => (
              <li
                key={item.id}
                className={classnames({completed: item.isDone})}
              >
                <div className="view">
                  <input
                    className="toggle"
                    type="checkbox"
                    checked={item.isDone}
                    onChange={this.changeChecked(item.id)}
                  />
                  <label>{item.title}</label>
                  <button
                    className="destroy"
                    onClick={delTodo(item.id)}
                  />
                </div>
                <input className="edit" defaultValue="Rule the web"/>
              </li>
            ))
          }
        </ul>
      </section>
    );
  }
}

export default Main;
